<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>订单管理</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../css/back-index.css" />
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap-paginator.js"></script>
    <script src="../js/bootstrap-mypaginator.js"></script>
    <script type="text/javascript">
        $(function(){
            //课程章节显示
            $(".order_detail").on("click", function() {
                $('#frame-id', window.parent.document).attr('src', 'back_orderDetailManage.html');
            });

            // 显示隐藏查询列表
            $('#show_order_search').click(function() {
                $('#show_order_search').hide();
                $('#upp_order_search').show();
                $('.show-order-search').slideDown(500);
            });
            $('#upp_order_search').click(function() {
                $('#show_order_search').show();
                $('#upp_order_search').hide();
                $('.show-order-search').slideUp(500);
            });

            //分页回调函数,点击按钮事件
            myoptions.onPageClicked = function(event, originalEvent, type, page) {
                //ajax回调接收数据成功时再重新初始化分页按钮
                console.log("pageNo=", page);
            };

            //分页,在bootstrap-mypaginator.js中
            myPaginatorFun("myPages", 1, 5);
        });

        function imageUpload(item){
            $(item).click();
        }
        function imageChange(item){
            var file = item.files[0];//获取选中的第一个文件
            $(".file").html(file.name);
            //console.log("file", file.name);
        }
    </script>

</head>

<body>
    <div class="panel panel-default" id="userPic">
        <div class="panel-heading">
            <h3 class="panel-title">订单管理</h3>
        </div>
        <div>
            <input type="button" value="查询" class="btn btn-success" id="doSearch" style="margin: 5px 5px 5px 15px;" />
            <input type="button" class="btn btn-primary" id="show_order_search" value="展开搜索" />
            <input type="button" value="收起搜索" class="btn btn-primary" id="upp_order_search" style="display: none;" />
        </div>
        <div class="panel-body">
            <div class="show-order-search" style="display: none;">
                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="form-group col-xs-6">
                            <label for="order_no_search" class="col-xs-3 control-label">订单编号：</label>
                            <div class="col-xs-8">
                                <input type="text" class="form-control" id="order_no_search" placeholder="请输入订单编号" />
                            </div>
                        </div>
                        <div class="form-group col-xs-6">
                            <label for="order_status_search" class="col-xs-3 control-label">状态：</label>
                            <div class="col-xs-8">
                                <select class="form-control" id="order_status_search" name="order_status_search" >
                                    <option value="-1" >全部</option>
                                    <option value="1" >待付款</option>
                                    <option value="2" >已付款(待发货)</option>
                                    <option value="3" >已发货(待签收)</option>
                                    <option value="4" >已签收(待评论)</option>
                                    <option value="5" >已评论(完成)</option>
                                    <option value="9" >已关闭</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-group col-xs-6">
                            <label class="col-xs-3 control-label">开始日期：</label>
                            <div class="col-xs-8">
                                <input type="text" class="form-control" placeholder="请输入订单创建开始时间:2019-07-10" />
                            </div>
                        </div>
                        <div class="form-group col-xs-6">
                            <label class="col-xs-3 control-label">结束日期：</label>
                            <div class="col-xs-8">
                                <input type="text" class="form-control" placeholder="请输入订单创建结束时间:2019-07-12" />
                            </div>
                        </div>
                    </div>
                    
                </form>
            </div>

            <div class="show-list">
                <table class="table table-bordered table-hover" style="text-align: center;">
                    <thead>
                        <tr class="text-danger">
                            <th class="text-center">编号</th>
                            <th class="text-center">订单编号</th>
                            <th class="text-center">总价</th>
                            <th class="text-center">下单用户</th>
                            <th class="text-center">下单时间</th>
                            <th class="text-center">状态</th>
                            <th class="text-center">操作</th>
                        </tr>
                    </thead>
                    <tbody id="tb">
                        <tr>
                            <td>1</td>
                            <td>itany20190808123456</td>
                            <td>￥125.85</td>
                            <td>neo</td>
                            <td>2019-08-08 11:40:00</td>
                            <td>
                                <select style="width: 120px;height: 30px;margin-right: 5px;" name="order_status_select" >
                                    <option value="1" selected >待付款</option>
                                    <option value="2" >已付款(待发货)</option>
                                    <option value="3" >已发货(待签收)</option>
                                    <option value="4" >已签收(待评论)</option>
                                    <option value="5" >已评论(完成)</option>
                                    <option value="9" >已关闭</option>
                                </select>
                                <input type="button" class="btn btn-warning btn-sm modify_order_status" value="修改状态" />
                            </td>
                            <td class="text-center">
                                <input type="button" class="btn btn-success btn-sm order_detail" value="订单详情" />
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>itany20190808321956</td>
                            <td>￥96.5</td>
                            <td>jerry</td>
                            <td>2019-08-08 12:00:00</td>
                            <td>
                                <select style="width: 120px;height: 30px;margin-right: 5px;" name="order_status_select" >
                                    <option value="1" >待付款</option>
                                    <option value="2" >已付款(待发货)</option>
                                    <option value="3" >已发货(待签收)</option>
                                    <option value="4" >已签收(待评论)</option>
                                    <option value="5" >已评论(完成)</option>
                                    <option value="9" selected >已关闭</option>
                                </select>
                                <input type="button" class="btn btn-warning btn-sm modify_order_status" value="修改状态" />
                            </td>
                            <td class="text-center">
                                <input type="button" class="btn btn-success btn-sm order_detail" value="订单详情" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 分页 -->
            <div style="text-align: center;" >
                <ul id="myPages" ></ul>
            </div>

        </div>
    </div>
</body>

</html>